import React, { Component, } from 'react';
import {AsyncStorage, SectionList , FlatList} from 'react-native';
import { StyleSheet, Text, TouchableHighlight, View, } from 'react-native';
import { Switch, TextInput } from 'react-native-gesture-handler';
import PayeeUserListData from './data'
import PayeeUserListBusiness from './biz';
import { Toast, } from '../../../components';
import Icon from 'react-native-vector-icons/FontAwesome'

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    paddingBottom:30
  },
  searchBar: {
    height:40,
    backgroundColor:'#FFF',
    width:'100%',
    marginTop:20
  },
  userListSection : {
    marginTop:10,
    height:'90%',
    display:'flex',
    flexDirection:'column',
    backgroundColor:'#FFF',
    width:'100%',
    justifyContent:'space-between'
  },
  addReceiver : {
    borderRadius: 10,
    width:320,
    textAlign: 'center',
    fontSize: 16,
    paddingTop: 10,
    paddingBottom: 10,
    backgroundColor:'#0091ff', 
    color: '#FFFFFF',
    marginTop: 30,
    marginLeft:20, 
    marginRight: 20, 
  },
  contactsContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
    paddingBottom:50
  },
});
export default class PayeeUserList extends Component {

  static kPageSize = 20
  static navigationOptions = ({navigation}) => ({
    title: navigation?.state?.params?.receiverType == 2 ? '添加收款企业' : '添加收款人'
  });

  constructor(props) {
    super(props)
    let callbackAction = props?.navigation?.state?.params?.callback 
    let receiverType = props?.navigation?.state?.params?.receiverType
    this.state = {
      payeeUserList:[
      ],
      callbackAction,
      receiverType,
      pageNum : 0,
      keyWord : ''
    }
  }
  componentDidMount() {
    this.refreshUserList()
  }
  handleItemClick() {
  }
  bizValueWithKeyPath(key,bizDataKey) {
    console.log('TAGGG', '======bizDataKey==bizValueWithKeyPath=====' + JSON.stringify(bizDataKey))
    if (key && bizDataKey) {
      let res = this.state.bizData[bizDataKey][key]
      return ''+res
    }
    return ''
  }
  refreshBizValueWithKeyPath(value,key,bizDataKey) {
    console.log('TAGGG', '======bizDataKey===refreshBizValueWithKeyPath====' + JSON.stringify(bizDataKey))
    let res = this.state.bizData[bizDataKey]
    res[key] = value
    this.setState(res)
  }
  gotoPage(pageName,params){
    this.props.navigation.navigate(pageName,params)
  }
  async refreshUserList() {
    PayeeUserListBusiness.fetchPayeeList({
        keyWord:this.state.keyWord,
        pageNum: this.state.pageNum,
        pageSize:PayeeUserList.kPageSize
      },
      (resp)=>{
        console.log(`payeeList is ` , JSON.stringify(resp))
        if(this.state.pageNum == 0) {
          this.state.payeeUserList = resp
        }else {
          this.state.payeeUserList.push(resp)
        }
        this.setState(this.state)
        console.log('AddPayeeUser callback end ' , this.state.payeeUserList)
      }
    )
  }
  goBack() {
    this.props.navigation.goBack()
  }
  render() {
    console.log('TAGGG', '======render==userListSection======' + JSON.stringify(this.state.payeeUserList))
    return (
      <View style={styles.container}>
        <View style={styles.userListSection}>
          <View>
            <FlatList
              bounces={false}
              keyExtractor={item=>item.id}
              data={this.state.payeeUserList.data}
              renderItem={({item})=>{
                return ( <View style={{height:50,flexDirection:'column',justifyContent:'space-between'}}>
                          <TouchableHighlight style={{height:49 }} 
                          onPress={()=>{
                            console.log('callbackAction is ', this.state.callbackAction)
                            console.log('item is ' , item)
                            if(this.state.callbackAction){
                              this.state.callbackAction(item)
                            }
                            this.goBack()
                          }}>
                            <Text style={{marginLeft:20,lineHeight:49, color: '#212121'}}>
                              {`${this.state.receiverType == 2 ? '收款企业名称':'收款人姓名'}：${item?.receiverName}`}
                            </Text>
                          </TouchableHighlight>
                          <View style={{height:0.5,width:'auto',backgroundColor:'#000',marginLeft:20,marginRight:20}}></View>
                </View>)
              }}
             />
          </View>
        </View>
        <TouchableHighlight onPress={()=>{
            this.gotoPage('AddPayeeUser' , { 
              receiverType : this.state.receiverType , 
              pageMode:1, 
              callback:()=>{
              this.refreshUserList()
            }})
          }}>
            <Text style={styles.addReceiver}>{this.state.receiverType == 2  ? '添加收款企业': '添加收款人'}</Text>
          </TouchableHighlight>
      </View>
    );
  }
}

